#yyr {
  display: block;
  text-align: left;

  #page_media {
    width: 1200px;
    height: 100%;
    margin: auto;
    padding-left: 100px;
    .title {
      background: url(../images/yyr-title_f17e1f9d.webp) no-repeat;
      width: 100%;
      height: 171px;
      background-size: contain;
    }

    .yyr-container {
      // display: flex;
      height: calc(100% - 171px);
      // flex-direction: column;

      .yyr-center {
        // flex: 6;
        display: flex;
        justify-content: space-between;

        .media-video {
          flex: 2;
          display: flex;
          flex-direction: column;
          .title-video {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            height: 43px;
            background: url(../images/yyr-title_video_4acd84d1.webp) no-repeat;

            a:hover i {
              background: #514db7;
            }

            a {
              color: #3d3d57;
              padding-right: 20px;

              i {
                display: inline-block;
                position: relative;
                width: 21px;
                height: 21px;
                border-radius: 50%;
                position: relative;
                top: 3px;
                left: 3px;
                background: #8584c3;
              }

              i::before {
                content: '';
                width: 11px;
                height: 1px;
                position: absolute;
                margin: 0 auto;
                left: 5px;
                top: 10px;
                background: #fff;
              }

              i::after {
                content: '';
                width: 1px;
                height: 11px;
                position: absolute;
                margin: 0 auto;
                left: 10px;
                top: 5px;
                background: #fff;
              }
            }
          }
          .video-list {
            flex: 1;
            display: flex;
            padding: 20px 20px 20px 0px;

            .videos {
              flex: 1;

              li {
                display: none;
                position: relative;
                height: 322px;
                border-radius: 4px;
                overflow: hidden;

                .img-wrap img {
                  height: 322px;
                }

                .btn-video {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  color: #fff;

                  .btn-play {
                    display: block;
                    width: 84px;
                    height: 84px;
                    background: url(../images/yyr-btn_play_4ba8bceb.png) no-repeat;
                    animation: yyr-pulse 1.5s linear infinite;
                    cursor: pointer;
                  }
                }

                .mask {
                  position: absolute;
                  top: 0px;
                  left: 0px;
                  width: 100%;
                  height: 100%;
                  background-color: rgba(0, 0, 0, 0.3);
                  display: flex;
                  justify-content: center;
                  align-items: center;
                }
              }

              li.active {
                display: block;
              }
            }

            .video-nav {
              background: url(../images/yyr-nav_aad04a3a.webp) no-repeat;
              width: 137px;
              height: 322px;
              padding-top: 51px;

              li {
                position: relative;
                margin-bottom: 17px;
                height: 51px;

                p {
                  position: absolute;
                  font-size: 16px;
                  color: #514527;
                  top: 20px;
                  left: 48px;
                  width: 88px;
                }

                .nav-mask {
                  position: absolute;
                  top: 0px;
                  left: 0px;
                  width: 0px;
                  height: 51px;
                  background-color: rgba(145, 145, 17, 0.49);
                  transition: all 1s;
                }
              }

              li:hover .nav-mask,
              li.active .nav-mask {
                width: 100%;
              }
            }
          }
        }

        .media-music {
          flex: 1;
          .title-music {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            height: 43px;
            background: url(../images/yyr-title_music_aef294f4.webp) no-repeat;
            a:hover i {
              background: #514db7;
            }

            a {
              color: #3d3d57;
              padding-right: 10px;

              i {
                display: inline-block;
                position: relative;
                width: 21px;
                height: 21px;
                border-radius: 50%;
                position: relative;
                top: 3px;
                left: 3px;
                background: #8584c3;
              }

              i::before {
                content: '';
                width: 11px;
                height: 1px;
                position: absolute;
                margin: 0 auto;
                left: 5px;
                top: 10px;
                background: #fff;
              }

              i::after {
                content: '';
                width: 1px;
                height: 11px;
                position: absolute;
                margin: 0 auto;
                left: 10px;
                top: 5px;
                background: #fff;
              }
            }
          }
          .music-info {
            height: 322px;
            background: url(../images/yyr-bg_music_af8d749d.webp) no-repeat center top;
            position: relative;

            .music-cover {
              position: absolute;
              width: 169px;
              height: 169px;
              top: 50%;
              left: 50%;
              background: url(../images/yyr-music_cover_af285eac.webp) no-repeat;
              animation: yyr-rotate 40s linear infinite backwards;
              animation-play-state: paused;
              // animation-play-state: running;
            }

            .music-control {
              position: absolute;
              background: #e8e7fb;
              width: 90%;
              height: 42px;
              bottom: -20px;
              left: 50%;
              transform: translate(-50%, 0%);
              border-radius: 20px;
              display: flex;
              align-items: center;

              #music-lines {
                width: 152px;
                height: 42px;
                .bar {
                  padding: 0 0 0 8px;
                  display: flex;
                  align-items: center;
                  position: relative;
                  top: 5px;
                  left: 5px;
                }
                .bar .group i {
                  background: #b6b4db;
                  display: inline-block;
                  vertical-align: middle;
                  margin-right: 3px;
                  width: 1px;
                }
                .bar.active i:nth-child(1) {
                  -webkit-animation: living 0.8s 0.3s linear infinite backwards 300ms 0 ease;
                  animation: living 0.8s 0.3s linear infinite backwards 300ms 0 ease;
                  -webkit-animation: living 0.8s 0.3s linear infinite backwards;
                  animation: living 0.8s 0.3s linear infinite backwards;
                }
                .bar.active i:nth-child(2) {
                  -webkit-animation: living 0.8s -0.6s linear infinite backwards 300ms 0 ease;
                  animation: living 0.8s -0.6s linear infinite backwards 300ms 0 ease;
                  -webkit-animation: living 0.8s -0.6s linear infinite backwards;
                  animation: living 0.8s -0.6s linear infinite backwards;
                }
                .bar.active i:nth-child(3) {
                  -webkit-animation: living 0.8s -0.8s linear infinite backwards 300ms 0 ease;
                  animation: living 0.8s -0.8s linear infinite backwards 300ms 0 ease;
                  -webkit-animation: living 0.8s -0.8s linear infinite backwards;
                  animation: living 0.8s -0.8s linear infinite backwards;
                }
                .bar.active i:nth-child(4) {
                  -webkit-animation: living 0.8s -1.1s linear infinite backwards 300ms 0 ease;
                  animation: living 0.8s -1.1s linear infinite backwards 300ms 0 ease;
                  -webkit-animation: living 0.8s -1.1s linear infinite backwards;
                  animation: living 0.8s -1.1s linear infinite backwards;
                }
                .bar .group1 i {
                  height: 32px;
                }

                .bar .group1 i:nth-child(1) {
                  height: 32px;
                }

                .bar .group1 i:nth-child(2) {
                  height: 18px;
                }

                .bar .group1 i:nth-child(3) {
                  height: 20px;
                }

                .bar .group1 i:nth-child(4) {
                  height: 16px;
                }

                .bar .group2 i {
                  height: 30px;
                }

                .bar .group2 i:nth-child(1) {
                  height: 24px;
                }

                .bar .group2 i:nth-child(2) {
                  height: 28px;
                }

                .bar .group2 i:nth-child(3) {
                  height: 20px;
                }

                .bar .group2 i:nth-child(4) {
                  height: 28px;
                }

                .bar .group3 i {
                  height: 42px;
                }

                .bar .group3 i:nth-child(1) {
                  height: 32px;
                }

                .bar .group3 i:nth-child(2) {
                  height: 22px;
                }

                .bar .group3 i:nth-child(3) {
                  height: 12px;
                }

                .bar .group3 i:nth-child(4) {
                  height: 20px;
                }

                .bar .group4 i {
                  height: 32px;
                }

                .bar .group4 i:nth-child(1) {
                  height: 15px;
                }

                .bar .group4 i:nth-child(2) {
                  height: 12px;
                }

                .bar .group4 i:nth-child(3) {
                  height: 22px;
                }

                .bar .group4 i:nth-child(4) {
                  height: 14px;
                }
              }
                

                p {
                  flex: 1;
                }

                a {
                  width: 40px;
                  height: 39px;
                  margin-right: 10px;
                  margin-top: 1px;
                  background: url(../images/yyr-btn_start_aa29fe57.webp);
                }
                a.active{
                  background: url(../images/yyr-btn_pause_c6f5f5c5.webp);
                }
              }
            }
          }
        }

        .yyr-footer {
          // flex: 4;
          .media-pic{
            .title-pic{
              display: flex;
              align-items: center;
              justify-content: flex-end;
              height: 43px;
              background: url(../images/yyr-title_tujian_3b370977.png) no-repeat;
              a:hover i {
                background: #514db7;
              }
  
              a {
                color: #3d3d57;
                padding-right: 10px;
  
                i {
                  display: inline-block;
                  position: relative;
                  width: 21px;
                  height: 21px;
                  border-radius: 50%;
                  position: relative;
                  top: 3px;
                  left: 3px;
                  background: #8584c3;
                }
  
                i::before {
                  content: '';
                  width: 11px;
                  height: 1px;
                  position: absolute;
                  margin: 0 auto;
                  left: 5px;
                  top: 10px;
                  background: #fff;
                }
  
                i::after {
                  content: '';
                  width: 1px;
                  height: 11px;
                  position: absolute;
                  margin: 0 auto;
                  left: 10px;
                  top: 5px;
                  background: #fff;
                }
              }
            }
            .pic-list{
              padding-top: 20px;
              #picList{
                display: flex;
                justify-content: space-between;
                align-items: center;
                li{
                  margin-right: 15px;
                  position: relative;
                  border-radius: 3px;
                  height: 200px;
                  a{
                    overflow: hidden;
                    position: relative;
                    display: block;
                    width: 100%;
                    height: 100%;
                  }
                  a:hover{
                    color: #666;
                  }
                  .img{
                    height: 170px;
                    width: 100%;
                    display: block;
                    overflow:hidden;
                    img{
                      transition: all .5s;
                    }
                  }
                  .pic-name{
                    height: 30px;
                    line-height: 30px;
                    font-size: 14px;
                    color: #3d3d57;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    i{
                      width: 20px;
                      height: 20px;
                      margin-right: 10px;
                      background-image: url(../images/yyr-tupian-icon_b3a8bc8e.png);
                    }
                  }
                  .picHover{
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    background-color: rgba(0, 0, 0, 0.3);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 12px;
                    color: #666;
                  }
                }
                li:hover img{
                  transform: scale(1.2);
                }
                li:nth-child(4){
                  margin-right: 0;
                }
              }
            }
          }
        }
      }
    }
  }

  @keyframes yyr-pulse {
    0% {
      -webkit-transform: scale(0.9);
      transform: scale(0.9);
    }

    50% {
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
    }

    100% {
      -webkit-transform: scale(0.9);
      transform: scale(0.9);
      opacity: 1;
    }
  }

  @keyframes yyr-rotate {
    0% {
      -webkit-transform-origin: center center;
      transform-origin: center center;
      -webkit-transform: rotate(0deg);
      transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
      -webkit-transform-origin: center center;
      transform-origin: center center;
      -webkit-transform: rotate(360deg);
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }

  @keyframes living {
    0% {
      transform: scaleY(1);
      -webkit-transform: scaleY(1);
      -moz-transform: scaleY(1);
      -ms-transform: scaleY(1);
      -o-transform: scaleY(1);
    }
    50% {
      transform: scaleY(0.3);
      -webkit-transform: scaleY(0.3);
      -moz-transform: scaleY(0.3);
      -ms-transform: scaleY(0.3);
      -o-transform: scaleY(0.3);
    }
    100% {
      transform: scaleY(1);
      -webkit-transform: scaleY(1);
      -moz-transform: scaleY(1);
      -ms-transform: scaleY(1);
      -o-transform: scaleY(1);
    }
  }
